<template>
  <div>
    <el-main>
      <el-row type="flex" justify="space-between">
        <el-col v-show="!analysisStatus">
          <el-button
            type="primary"
            v-if="is_admin_view == 0"
            @click="dialogVisible = true"
            >添加竞争对手</el-button
          >
          <span style="font-size: 14px; margin-left: 10px"
            >更新周期：{{ data.start_time }} 至 {{ data.end_time }}</span
          >
        </el-col>
        <el-col :lg="6">
          <el-button
            v-if="!analysisStatus"
            type="primary"
            @click="handleShowBtn"
            >查看趋势分析</el-button
          >
          <el-button
            v-if="analysisStatus"
            type="primary"
            @click="analysisStatus = false"
            >查看竞争对手</el-button
          >
        </el-col>
      </el-row>
      <div
        v-show="analysisStatus"
        style="margin-top: 30px"
        class="s_flex s_justify_content"
      >
        <div class="left_menus">
          <!-- :unique-opened="true" -->
          <el-menu
            :default-openeds="['6', '7', '8']"
            collapse-transition
            class="el-menu-vertical-demo"
            @select="handselect"
            @open="handleOpens"
            @close="handleCloses"
          >
            <el-submenu
              v-for="(item, index) in menu"
              :index="item.id"
              :key="index"
            >
              <template slot="title">
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :class="checkType == b.id ? 'menu_active' : ''"
                  v-for="(b, i) in item.list"
                  :key="i"
                  :index="b.id"
                  ><i :class="b.icon"></i>{{ b.name }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <div class="centet_chart" v-if="list">
          <analysisItem
            :title="title"
            :id="id"
            :list="list"
            :Etype="Etype"
            v-if="Etype == 6"
          />
          <Columnar
            :title="ColumTitle"
            :id="Columanar"
            :list="Columlist"
            v-if="Etype == 7"
          />
          <diagram
            :title="diagramTitle"
            :id="diagram"
            :list="diagramlist"
            v-if="Etype == 8"
          />
        </div>
        <div class="right_screen">
          <div>
            <h4>当前申请（专利权）人</h4>
            <div>
              <div style="margin: 15px 0">
                <p>
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox
                  >
                  <el-checkbox
                    @click.native="clickget(city, $event)"
                    class="check_p"
                    v-for="(city, i) in cities"
                    v-model="city.check"
                    :label="city.bname"
                    :key="city.id"
                    ><span
                      v-if="i == index"
                      v-for="(item, index) in list.color"
                      class="spanw"
                      :style="{ 'background-color': item }"
                      :key="index"
                    ></span
                    >{{ city.bname }}</el-checkbox
                  >
                </p>
              </div>
            </div>
            <div class="radios_item">
              <h4>申请年</h4>
              <el-radio-group v-model="radio">
                <p class="check_p"><el-radio :label="0">所有</el-radio></p>
                <p class="check_p"><el-radio :label="20">最近20年</el-radio></p>
                <p class="check_p"><el-radio :label="10">最近10年</el-radio></p>
                <p class="check_p">
                  <el-radio
                    :label="30"
                    class="s_flex s_align_items s_justify_content"
                  >
                    <div class="s_flex s_align_items s_justify_content">
                      <div style="width: 60px">
                        <el-input v-model="input" placeholder=""></el-input>
                      </div>
                      &nbsp; To &nbsp;
                      <div style="width: 60px">
                        <el-input v-model="input2" placeholder=""></el-input>
                      </div>
                    </div>
                  </el-radio>
                </p>
              </el-radio-group>
              <div class="check_p">
                <el-button type="primary" @click="analysis">
                  &nbsp; &nbsp; &nbsp; &nbsp;分析 &nbsp; &nbsp; &nbsp;
                  &nbsp;</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <CreatTable
        v-show="!analysisStatus"
        :ListArr="ListArr"
        :handelType="handelType"
        @deletUser="deletUser"
        :title="name"
      />

      <!--        <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-size="page.page_size"
          layout="total, prev, pager, next, jumper"
          :total="page.count"
          align='left'
        ></el-pagination> -->
    </el-main>
    <el-dialog
      title="添加竞争对手"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-input
        v-model="addVal"
        placeholder="请添加竞争对手公司名称"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="clickVisible"
          >取消操作</el-button
        >
        <el-button
          type="button"
          class="pubBtn"
          style="width: 98px"
          @click="addSave"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      :visible.sync="tisp"
      width="30%"
      :before-close="CloseTisp"
    >
      <p>竞争对手已添加成功,专利数据初始化中...</p>
      <p style="margin-top: 15px" class="deletText">需耗时1~2天,请耐心等待</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tisp = false">确 定</el-button>
      </span>
    </el-dialog>
    <Service />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { rivalsList, rivalsAdd, rivalsDelete, patentIndex2 } from "@/api";
import CreatTable from "@/components/CreatTable/CreatTable";
import Service from "@/components/Service";
import echarts from "echarts";
import { trendTimes, trendCompany, trendPatent, trendLaw } from "@/api/user";
import analysisItem from "@/components/analysisItem";
import Columnar from "@/components/Columnar";
import diagram from "@/components/diagram";
export default {
  data() {
    return {
      addVal: "",
      analysisStatus: false,
      dialogVisible: false,
      ListArr: [],
      page: [],
      tisp: false,
      tableData: [],
      handelType: 1,
      data: [],
      // name: "公司名称",
      input: "",
      input2: "",
      radio: 0,
      checkAll: true,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      checkAllLength: [],
      id: "m_swiper",
      Columanar: "Columanar",
      diagram: "diagram",
      menu: [
        {
          id: "6",
          title: "时间趋势",
          list: [
            {
              id: "6-1",
              name: "申请（专利权）人申请趋势",
              icon: "iconfont icon-zhexiantu",
            },
            {
              id: "6-2",
              name: "申请（专利权）人公开趋势",
              icon: "iconfont icon-zhexiantu",
            },
            {
              id: "6-3",
              name: "申请（专利权）人授权趋势",
              icon: "iconfont icon-zhexiantu",
            },
          ],
        },
        {
          id: "7",
          title: "专利分布",
          list: [
            {
              id: "7-1",
              name: "发明专利分布",
              icon: "iconfont icon-zhuzhuangtu",
            },
            {
              id: "7-2",
              name: "新型专利分布",
              icon: "iconfont icon-zhuzhuangtu",
            },
            {
              id: "7-3",
              name: "外观专利分布",
              icon: "iconfont icon-zhuzhuangtu",
            },
          ],
        },
        {
          id: "8",
          title: "法律状态",
          list: [
            {
              id: "8-1",
              name: "简单法律状态",
              icon: "iconfont icon-zhuzhuangtu1",
            },
            {
              id: "8-2",
              name: "专利类型",
              icon: "iconfont icon-zhuzhuangtu1",
            },
          ],
        },
      ],
      list: [],
      Columlist: [],
      diagramlist: [],
      patent_body: [],
      // type: 0,
      checkType: "6-1",
      time: 0,
      title: "申请（专利权）人申请趋势",
      ColumTitle: "发明专利分布",
      diagramTitle: "简单法律状态",
      Etype: 6,
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "roles",
      "type",
      "is_admin_view",
    ]),
  },
  components: {
    CreatTable,
    Service,
    analysisItem,
    Columnar,
    diagram,
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await patentIndex2({ type: 1 });
        this.ListArr = res.list_all;
        this.data = res;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    rowClick(row) {},
    clickVisible() {
      this.dialogVisible = false;
      this.addVal = "";
    },
    handleShowBtn() {
      this.getCheckList();
      this.analysisStatus = true;
    },
    CloseTisp() {
      this.tisp = false;
    },
    // //每页下拉显示数据
    // async handleSizeChange(size) {
    //   try{
    //     const res =await rivalsList({
    //        page:size,
    //     })
    //     this.ListArr = res.list;
    //     this.page = res.page
    //   } catch (e){
    //     this.$message.error(e.message)
    //   }

    // },
    // //点击第几页
    // async handleCurrentChange(currentPage) {
    //   try{
    //     const res =await rivalsList({
    //        page:currentPage,
    //     })
    //     this.ListArr = res.list;
    //     this.page = res.page
    //   } catch (e){
    //     this.$message.error(e.message)
    //   }
    // },
    handleClose() {
      this.dialogVisible = false;
    },
    async addSave() {
      try {
        await rivalsAdd({ name: this.addVal });
        this.getList();
        this.dialogVisible = false;
        this.addVal = "";
        this.$message.success("添加成功");
        this.tisp = true;
      } catch (e) {
        this.addVal = "";
        this.$message.error(e.message);
      }
    },
    deletUser(id) {
      try {
        this.$confirm("确定不再关注吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await rivalsDelete({ id: id });
            this.getList();
            this.$message.success("添加成功");
          })
          .catch(() => {});
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handleCheckAllChange(val) {
      if (val == false) {
        this.cities.map((item) => {
          item.check = false;
          this.patent_body = [];
        });
        this.getTime();
        this.getPatent();
        this.getLaw();
      } else {
        this.cities.map((item) => {
          item.check = true;
          this.patent_body.push(item.bname);
        });
        this.getTime();
        this.getPatent();
        this.getLaw();
      }

      //   this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    clickget(i, e) {
      if (e.target.tagName === "INPUT") {
        if (i.check == false) {
          this.cities.map((item) => {
            if (i.bname == item.bname) {
              this.patent_body.push(i.bname);
              item.check = true;
            }
          });
          this.getTime();
          this.getPatent();
          this.getLaw();
        } else {
          this.cities.map((item) => {
            if (i.bname == item.bname) {
              this.patent_body.splice(this.patent_body.indexOf(i.bname), 1);
              item.check = false;
            }
          });
          this.getTime();
          this.getPatent();
          this.getLaw();
        }
      }
    },
    async getCheckList() {
      try {
        this.cities = await trendCompany();
        this.cities.map((item) => {
          if (item.check) {
            this.checkAllLength.push(item.check);
            this.patent_body.push(item.bname);
          }
        });
        this.getTime();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    analysis() {
      this.getCheckList();
      this.getPatent();
      this.getLaw();
    },
    async getTime() {
      try {
        this.list = await trendTimes({
          patent_body: this.patent_body,
          type: this.type,
          time: this.input ? `${this.input},${this.input2}` : this.radio,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getPatent() {
      try {
        this.Columlist = await trendPatent({
          patent_body: this.patent_body,
          type: this.type,
          time: this.input ? `${this.input},${this.input2}` : this.radio,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getLaw() {
      try {
        this.diagramlist = await trendLaw({
          patent_body: this.patent_body,
          type: this.type,
          time: this.input ? `${this.input},${this.input2}` : this.radio,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    handselect(key, keyPath) {
      this.checkType = key;
      this.Etype = key.split("-")[0];
      if (key.split("-")[0] == 6) {
        this.type = key.split("-")[1];
        this.getTime();
      } else if (key.split("-")[0] == 7) {
        this.type = key.split("-")[1];
        this.getPatent();
      } else {
        this.type = key.split("-")[1];
        this.getLaw();
      }
      if (key == "6-1") {
        this.title = "申请（专利权）人申请趋势";
      } else if (key == "6-2") {
        this.title = "申请（专利权）人公开趋势";
      } else if (key == "6-3") {
        this.title = "申请（专利权）人授权趋势";
      }

      if (key == "7-1") {
        this.ColumTitle = "发明专利分布";
      } else if (key == "7-2") {
        this.ColumTitle = "新型专利分布";
      } else if (key == "7-3") {
        this.ColumTitle = "外观专利分布";
      }

      if (key == "8-1") {
        this.diagramTitle = "简单法律状态";
      } else if (key == "8-2") {
        this.diagramTitle = "专利类型";
      }
    },
    handleOpens(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleCloses(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
.left_menus {
  width: 20%;
  border: 1px solid #e6e9f0;
}
.right_screen {
  width: 20%;
}
.centet_chart {
  width: 60%;
}
.annularChart {
  width: 900px;
  height: 637px;
  margin: 0 auto;
  background-color: #fff;
  // transform: scale(.9);
}
.check_p {
  margin-top: 15px;
}
.radios_item {
  margin-top: 50px;
}
.spanw {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 5px;
  margin-right: 5px;
}
.menu_active {
  border-right: 3px solid #3377ff;
}
</style>
